<template>
    <el-aside width="220px" class="sidebar">
      <el-menu
        :default-active="activeMenu"
        class="el-menu-vertical"
        background-color="#1a2b4a"
        text-color="#fff"
        active-text-color="#409EFF"
        @select="handleMenuSelect"
      >
        <el-menu-item v-for="item in tabs" :key="item.value" :index="item.value">
          <el-icon><Menu /></el-icon>
          <span>{{ item.name }}</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
  </template>
  
  <script setup lang="ts">
  import { ref } from 'vue'
  import { Menu, Document } from '@element-plus/icons-vue'
  
  const activeMenu = ref('zbgl')
  const emit = defineEmits(['menu-change'])
  

  const tabs = ref([
    {
      name: '指标分类管理',
      value: 'zbgl'
    },
    {
      name: '指标公式管理',
      value: 'zbgsgl'
    },
    {
      name: '体检数值管理',
      value: 'tjsz'
    },
    {
      name: '在线填报',
      value: 'zxtb'
    },
    {
      name: '现场调查',
      value: 'xccd'
    },
  ])
  const handleMenuSelect = (index: string) => {
    activeMenu.value = index

    let item = tabs.value.find(item => item.value === index)
    emit('menu-change', item)
  }
  </script>
  
  <style scoped>
  .sidebar {
    background-color: #1a2b4a;
    height: 100%;
    
    .el-menu {
      border-right: none;
    }
  }
  </style>